<template>
    <div>
        <el-card>
            <!-- 按钮 -->
            <el-button size="small" icon="el-icon-plus" type="primary" @click="tagGroupVisible = true">新建群标签组</el-button>
        </el-card>
        <div class="interspaceH"></div>
        <el-card class="box-card">
            <!-- 列表 -->
            <el-table :data="tableData" :header-cell-style="{background:'#F3F4F7',color:'#555'}" style="width: 100%">
                <el-table-column prop="tagsGroupName" label="客群标签组" width="200">
                </el-table-column>
                <el-table-column prop="visibleRange" label="显示范围" width="300"></el-table-column>
                <el-table-column label="标签名" width="800">
                    <template slot-scope="scope">
                        <el-tag :key="item.tagsId" v-for="item in scope.row.tagList" :disable-transitions="false"
                                style="margin-bottom: 5px">{{ item.clientTagsName }}
                        </el-tag>
                        <el-input
                            class="input-new-tag"
                            v-if="scope.row.inputVisible"
                            v-model="scope.row.inputValue"
                            width="200px"
                            style="width: 200px"
                            clearable ref="saveTagInput"
                            size="mini"
                            @keyup.enter.native="handleInputConfirm(scope)"
                            @blur="handleInputConfirm(scope)">
                        </el-input>
                        <el-button v-else class="button-new-tag" size="small" @click="showInput(scope)">+添加</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="address" min-width="200" label="操作按钮">
                    <template slot-scope="scope">
                        <el-button type="text" @click="showTagGroup(scope.row)">展开</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="interspaceH"></div>

            <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                           @current-change="queryDataHandle($event,pagePagination.pageSize)"
                           :current-page="pagePagination.currentPage"
                           :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                           layout="total, sizes, prev, pager, next"
                           :total="pagePagination.total">
            </el-pagination>
        </el-card>
        <el-dialog
            width="40%"
            title="添加标签组"
            :visible.sync="tagGroupVisible"
            append-to-body>

            <CreateGroupTag type="1" ref="createGroupTag"/>

            <div slot="footer" class="dialog-footer">
                <el-button @click="tagGroupVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="submitFormHandle" size="small">确定</el-button>
            </div>
        </el-dialog>

        <!-- 展开数据 -->
        <el-dialog :title="title" :visible.sync="tagFormVisible" width="30%" @click="tagClose">
            <el-form :inline="true" :model="tagFormInline" class="user-search">
                <el-form-item label="标签组名称:">
                    <el-input size="small" v-model="tagFormInline.tagsGroupName" disabled></el-input>
                </el-form-item>
                <br/>
                <el-form-item label="可见范围:">
                    <el-button size="small" style="border-color: rgb(64,158,255); color: rgb(64,158,255)">{{tagFormInline.visibleRange}}</el-button>
                </el-form-item>
                <br/>
                <el-form-item label="标签名:">
                    <el-tag v-for="tag in tagFormInline.tagList" :key="tag.name"> {{ tag.clientTagsName }}</el-tag>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" type="primary" @click="tagClose">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import CreateGroupTag from "@/views/custGroup/groupTag/client_create_group_tag"
    //多选框 - 开始
    const visibleRange = [
        {
            value: '0',
            label: '全部员工'
        },
        {
            value: '1',
            label: '部门可见'
        }
    ]
    export default {
        data() {
            return {
                tagGroupVisible: false,
                title: '添加标签组',
                formVisible: false,
                formTagVisible: false,
                tagFormVisible: false,
                tagVisible: false,
                radio: 1,
                tagValue: '',
                tagGroupForm: {
                    tagsGroupName: '',
                    tagsGroupType: '1',
                    visibleRange: '1',
                    tagNameList: []
                },

                // 编辑信息
                formInline: {
                    items: [{
                        lordName: ""
                    }]
                },
                tagFormInline: {
                    tagsGroupName: '',
                    clientStage: '全部可见',
                    items: [{
                        lordName: ""
                    }],
                    visibleRange: '0'
                },
                tableData: [],
                listData: [], // 用户数据
                data: {
                    id: '',
                    groupName: '',
                    lordName: '',
                    groupTag: '',
                    createTime: ''
                },
                loading: false, // true显示加载

                options: [{
                    value: '',
                    label: ''
                }],
                pagePagination: {
                    currentPage: 1,
                    pageSizes: [10, 15, 20, 25],
                    pageSize: 10,
                    total: 0
                }
            }
        },

        // 注册组件
        components: {
            CreateGroupTag
        },

        /**
         * 创建完毕
         */
        mounted() {
            this.queryDataHandle(1,10)
        },

        methods: {
            queryDataHandle(page = 1,row = 10) {
                let that = this
                let payload = {
                    tagsGroupType: "1",
                    pageNum: page,
                    pageSize: row
                }
                this.$request("/api/tags/getGroupTagsPageByParams/1_0", payload, "POST").then((data) => {
                    this.tableData = [...data.rows]
                    for(let i=0;i<that.tableData.length ;i++){
                        if(that.tableData[i].visibleRange == '0'){
                            that.tableData[i].visibleRange = '全部员工'
                        }else{
                            that.tableData[i].visibleRange = '部门可见'
                        }
                        that.tableData[i]['inputVisible'] = false
                    }
                    that.pagePagination['total'] = data.total
                    that.pagePagination['pageSize'] = data.row
                })
            },

            formatter(row, column) {
                let field = column.property;
                let value = row[field];
                return this.$utils.formatterForLable(field, value, this.fieldType, this[field]);
            },
            tagClose() {
                this.tagGroupForm = {}
                this.tagFormVisible = false;
                this.tagVisible = false;
                this.tagValue = '';
                this.formVisible = false
            },
            submitFormHandle() {
                let payload = this.$refs.createGroupTag.getFormData()
                this.$request("/api/tags/insertGroupAndTags/1_0", payload, "POST").then((data) => {
                    this.$message.success("添加成功")
                    this.tagGroupVisible = false
                    this.$refs.createGroupTag.resetFormData()
                    this.queryDataHandle()
                })
            },
            showTagGroup(row) {
                this.title = '标签组展开'
                this.tagFormInline = {...row}
                this.tagFormVisible = true
            },
            showInput(data) {
                let index = data.$index;
                let tableData = this.tableData
                tableData[index].inputVisible = true;
                let tableJson = JSON.stringify(tableData)
                this.tableData = JSON.parse(tableJson)
                this.$nextTick(() => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            },
            handleInputConfirm(data) {
                let index = data.$index;
                let inputValue = this.tableData[index].inputValue;
                if (inputValue) {
                    let payload = {
                        tagsGroupId: this.tableData[index]['tagsGroupId'],
                        clientTagsName: inputValue,
                        createType: 'tag'
                    }
                    this.$request("/api/tags/insertGroupAndTags/1_0", payload, "POST").then((data) => {
                        this.$message.success("标签添加成功")
                        this.tableData[index].inputVisible = false;
                        this.tableData[index].tagValue = '';
                        this.queryDataHandle(1,10)
                    })
                    this.tableData[index].tagNameList.push(inputValue);
                }
                this.tableData[index].inputVisible = false;
                this.tableData[index].inputValue = '';
            },
        }
    }
</script>

<style scoped>
    .user-search {
        margin-top: 20px;
    }

    .el-link {
        margin: 0 20px 0 20px
    }
</style>
